// // DOM元素
// const chatMessages = document.getElementById('chat-messages');
// const userInput = document.getElementById('user-input');
// const sendButton = document.getElementById('send-button');

// // 模拟LLM响应的函数
// async function simulateLLMResponse(userMessage) {
//     // 这里是模拟的响应，实际项目中可以替换为真实的WebLLM调用
//     const responses = [
//         "我是一个运行在浏览器中的大语言模型演示。我可以回答简单的问题，但我的功能有限。",
//         "WebLLM技术允许在浏览器中运行轻量级的语言模型，无需将数据发送到服务器。",
//         "浏览器中运行AI模型的主要优势是保护用户隐私和减少对服务器的依赖。",
//         "目前，浏览器中的LLM模型通常比服务器端模型小，功能也相对有限。",
//         "WebAssembly和TensorFlow.js等技术使得在浏览器中运行复杂AI模型成为可能。"
//     ];
    
//     // 模拟思考时间
//     await new Promise(resolve => setTimeout(resolve, 1000 + Math.random() * 2000));
    
//     // 随机选择一个响应
//     return responses[Math.floor(Math.random() * responses.length)];
// }

// // 添加消息到聊天界面
// function addMessage(text, type) {
//     const messageDiv = document.createElement('div');
//     messageDiv.className = `message ${type}`;
    
//     const messagePara = document.createElement('p');
//     messagePara.textContent = text;
    
//     messageDiv.appendChild(messagePara);
//     chatMessages.appendChild(messageDiv);
    
//     // 滚动到最新消息
//     chatMessages.scrollTop = chatMessages.scrollHeight;
// }

// // 处理用户输入
// async function handleUserInput() {
//     const text = userInput.value.trim();
//     if (!text) return;
    
//     // 添加用户消息
//     addMessage(text, 'user');
    
//     // 清空输入框
//     userInput.value = '';
    
//     // 显示加载状态
//     const loadingDiv = document.createElement('div');
//     loadingDiv.className = 'message assistant';
//     loadingDiv.innerHTML = '<p>思考中...</p>';
//     chatMessages.appendChild(loadingDiv);
//     chatMessages.scrollTop = chatMessages.scrollHeight;
    
//     // 获取AI响应
//     try {
//         const response = await simulateLLMResponse(text);
        
//         // 移除加载状态
//         chatMessages.removeChild(loadingDiv);
        
//         // 添加AI响应
//         addMessage(response, 'assistant');
//     } catch (error) {
//         // 移除加载状态
//         chatMessages.removeChild(loadingDiv);
        
//         // 显示错误
//         addMessage('抱歉，处理您的请求时出现了问题。', 'system');
//         console.error('Error:', error);
//     }
// }

// // 事件监听器
// sendButton.addEventListener('click', handleUserInput);

// userInput.addEventListener('keypress', (e) => {
//     if (e.key === 'Enter' && !e.shiftKey) {
//         e.preventDefault();
//         handleUserInput();
//     }
// });

// // 初始化
// document.addEventListener('DOMContentLoaded', () => {
//     // 聚焦到输入框
//     userInput.focus();
    
//     // 可以在这里添加WebLLM模型的初始化代码
//     console.log('WebLLM演示已初始化');
// });

// js 主动的去拉取http 接口
// web 1.0 时代 html/css/js 服务器端java 返回的 js 只做简单的交互
// web 2.0 时代 js 主动的请求后端服务器 动态页面
// // 使用 fetch API 发送一个 GET 请求到 GitHub API，获取用户 shunwuyu 的所有仓库信息
// fetch('https://api.github.com/users/shunwuyu/repos')
// // 当请求成功返回响应时，将响应数据转换为 JSON 格式
// .then(response => response.json())
// // 处理转换后的 JSON 数据
// .then(data => {
// // 注释掉的日志输出，可用于调试查看获取到的仓库数据
// // console.log(data);
// // 使用 map 方法遍历仓库数据数组，为每个仓库生成一个包含仓库名称的 <li> 元素，包裹在 <ul> 中
// // 再使用 join 方法将所有生成的 HTML 字符串连接成一个字符串
// // 最后将该字符串追加到页面中 id 为 reply 的元素的 HTML 内容之后
// document.querySelector('#reply').innerHTML += data.map( dataz =>`
// <ul>
// <li>${dataz.name}</li>
// </ul>
// `).join('')
// })

// 当LLM API 服务
// chat 方式 AIGC 生成/完成 返回的内容
// 由openai 制定的
// 请求行
// 命名
// webLLM web 底层是 http 协议
// LLM api 服务
// api.deepseek.con 二级域名 LLM服务以api的方式提供
// https 加密的http 更安全
// /chat 聊天的方式 messages 
const endpoint = 'https://api.deepseek.com/chat/completions'
// 请求头
const headers = {
    // 内容类型
    'Content-Type': 'application/json',
    // 授权
    // 'Authorization': 'Bearer sk-xxx'
}
// 请求体
const payload = {
    model:'deepseek-chat',
    messages: [
        // chat 三种方式
        // 1. 系统角色 只会出现一次 设置系统的角色 开始会话时
        // 2. 用户角色 user 提问
        // 3. 助手角色 assistant 回答
        {
            role: 'system',
            content: 'you are a helpful assistant'
        },
        {
            role:'user',
            content: '你是谁'
        }
    ]
}

fetch(endpoint, {
    method: 'POST',
    // http 请求传输只能是字符串，二进制流
    headers: headers,
    body: JSON.stringify(payload)
// 请求 + LLM 生成需要花时间
// http 是基于请求响应的简单协议
// 返回的也是文本或二进制流
}).then(response => response.json())
// 解析返回的json 数据 也要花时间
.then(data => {
    console.log(data);
    document.querySelector('#reply').innerHTML += data.choices[0].message.content
})